<template>
  <scroll-view scroll-y="true" class="scroll-container">
    <view class="scenic-wrapper">
      <text class="scenic-title">泉州风光</text>
      <swiper class="scenic-swiper" autoplay interval="3000" indicator-dots>
        <swiper-item>
          <image src="/static/images/city1.png" mode="widthFix" class="scenic-img"></image>
        </swiper-item>
        <swiper-item>
          <image src="/static/images/city2.jpg" mode="widthFix" class="scenic-img"></image>
        </swiper-item>
        <swiper-item>
          <image src="/static/images/city3.jpg" mode="widthFix" class="scenic-img"></image>
        </swiper-item>
        <swiper-item>
          <image src="/static/images/city4.jpg" mode="widthFix" class="scenic-img"></image>
        </swiper-item>
        <swiper-item>
          <image src="/static/images/city5.jpg" mode="widthFix" class="scenic-img"></image>
        </swiper-item>
      </swiper>
    </view>
    <view class="section">
      <text class="section-title">泉州介绍</text>
      <text class="intro-subtitle">海上丝绸之路之起点 - 泉州</text>
      <rich-text :nodes="cityIntro"></rich-text>
    </view>
    <view class="section">
      <text class="section-title">探索进度</text>
      <progress percent="60" show-info></progress>
    </view>
    <view class="section">
      <text class="section-title">选择城市</text>
      <picker mode="region" @change="regionChange">
        <view class="picker-view">当前选择：{{province}}-{{city}}-{{district}}</view>
      </picker>
    </view>
    <view class="section">
      <text class="section-title">泉州宣传</text>
      <video src="/static/videos/city-video.mp4" controls poster="/static/images/video-poster.jpg" class="video"></video>
    </view>
    <view class="section">
      <text class="section-title">泉州背景音乐</text>
      <view class="music-container">
        <view class="music-info">
          <image src="/static/images/music-cover.jpg" mode="widthFix" class="music-cover"></image>
          <view class="music-details">
            <text class="music-title">泉州南音精选</text>
            <text class="music-artist">传统民乐 · 非遗传承</text>
          </view>
        </view>
        
        <progress :percent="progress" stroke-width="6" class="music-progress" activeColor="#1AAD19" backgroundColor="#EEEEEE" />
        
        <view class="music-controls">
          <button class="control-btn" @click="toggleMusic">
            {{ isPlaying ? '暂停' : '播放' }}
          </button>
          <button class="control-btn" @click="restartMusic" :disabled="!audioLoaded">
            重新播放
          </button>
        </view>
      </view>
    </view>
    <view class="section">
      <text class="section-title">偏好设置</text>
      <view class="preference-item">
        <text>出行方式：</text>
        <radio-group @change="travelModeChange">
          <radio value="bus">公交</radio>
          <radio value="self" checked>自驾</radio>
          <radio value="walk">步行</radio>
        </radio-group>
      </view>
      <view class="preference-item">
        <text>显示推荐景点：</text>
        <switch v-model="showScenic" checked></switch>
      </view>
      <view class="preference-item">
        <text>探索半径: {{radius}}m</text>
        <slider :value="radius" @change="radiusChange" min="100" max="2000"></slider>
      </view>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      cityIntro: `
        <p>历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代"海上丝绸之路"起点，宋元时期被誉为"东方第一大港"。</p>
        <p>著名景点：清源山、开元寺、泉州南寺、崇武古城、洛阳桥等。</p>
        <p style="color: #1296db;">特色文化：拥有南音、木偶戏和闽南建筑等丰富的非物质文化遗产。</p>
      `,
      province: '福建省',
      city: '泉州市',
      district: '丰泽区',
      travelMode: 'self',
      showScenic: true,
      radius: 1000, 
      audioContext: null,
      isPlaying: false,
      progress: 0,
      audioLoaded: false,
      musicUrl: '/static/audios/city-music.mp3'
    };
  },
  onLoad() {
    this.audioContext = uni.createInnerAudioContext();
    this.audioContext.src = this.musicUrl;
    
    this.audioContext.onCanplay(() => {
      this.audioLoaded = true;
    });
    
    this.audioContext.onTimeUpdate(() => {
      if (this.audioContext.duration > 0) {
        this.progress = Math.floor((this.audioContext.currentTime / this.audioContext.duration) * 100);
      }
    });
    
    this.audioContext.onEnded(() => {
      this.isPlaying = false;
      this.progress = 0;
    });
    
    this.audioContext.onError((err) => {
      console.error('音频错误:', err);
      uni.showToast({
        title: '音乐加载失败',
        icon: 'none'
      });
    });
  },
  onUnload() {
    if (this.audioContext) {
      this.audioContext.stop();
      this.audioContext.destroy();
    }
  },
  methods: {
    regionChange(e) {
      this.province = e.detail.value[0];
      this.city = e.detail.value[1];
      this.district = e.detail.value[2];
    },
    travelModeChange(e) {
      this.travelMode = e.detail.value;
    },
    radiusChange(e) {
      this.radius = e.detail.value;
    },
    toggleMusic() {
      if (!this.audioLoaded) {
        uni.showToast({
          title: '音乐加载中...',
          icon: 'none'
        });
        return;
      }
      
      if (this.isPlaying) {
        this.audioContext.pause();
      } else {
        this.audioContext.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    restartMusic() {
      this.audioContext.currentTime = 0;
      this.audioContext.play();
      this.isPlaying = true;
    }
  }
};
</script>

<style>
.scroll-container {
  height: 100vh;
  background-color: #f5f5f5;
}

.scenic-wrapper, .section {
  margin: 15rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  padding: 20rpx;
}

.scenic-title, .section-title {
  font-size: 34rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  display: block;
  color: #222;
  padding-left: 5rpx;
  border-left: 6rpx solid #1296db;
}

.scenic-swiper {
  height: 400rpx;
  border-radius: 8rpx;
  overflow: hidden;
}
.scenic-img {
  width: 100%;
  height: 100%;
}

.intro-subtitle {
  font-size: 30rpx;
  font-weight: bold;
  font-weight: 500;
  margin-bottom: 15rpx;
  display: block;
}
rich-text p {
  font-size: 28rpx;
  line-height: 46rpx;
  margin-bottom: 12rpx;
  color: #555;
  text-align: justify;
}

progress {
  width: 100%;
  margin: 15rpx 0;
}

.picker-view {
  padding: 15rpx;
  background-color: #f9f9f9;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
}

.video {
  width: 100%;
  height: 450rpx;
  margin: 10rpx 0;
  border-radius: 8rpx;
}

.music-container {
  padding: 15rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
}
.music-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}
.music-cover {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}
.music-details {
  flex: 1;
}
.music-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #222;
  display: block;
  margin-bottom: 8rpx;
}
.music-artist {
  font-size: 24rpx;
  color: #666;
}
.music-progress {
  margin: 20rpx 0;
  height: 12rpx;
}
.music-controls {
  display: flex;
  justify-content: center;
  gap: 30rpx;
  margin-top: 10rpx;
}
.control-btn {
  width: 160rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  border-radius: 35rpx;
  background-color: #1296db;
  color: #fff;
  border: none;
}
.control-btn[disabled] {
  background-color: #ccc;
}

.preference-item {
  margin: 20rpx 0;
  display: flex;
  align-items: center;
  padding: 10rpx 0;
}
.preference-item text {
  font-size: 28rpx;
  color: #333;
  min-width: 180rpx;
}
radio-group {
  display: flex;
  margin-left: 15rpx;
}
radio {
  margin-right: 35rpx;
  font-size: 28rpx;
}
switch {
  margin-left: 20rpx;
  transform: scale(1.2);
}
slider {
  flex: 1;
  margin-left: 20rpx;
}
</style>
    